<template>
  <div class="layout">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="logo">
        <div class="logo-icon">
          <svg viewBox="0 0 24 24" width="28" height="28" fill="currentColor">
            <path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
          </svg>
        </div>
        <h2>智护银龄</h2>
      </div>
      <nav class="menu">
        <div 
          v-for="(item, index) in menuItems" 
          :key="index"
          :class="['menu-item', { active: isMenuItemActive(item.key) }]"
          @click="navigateTo(item.key)"
        >
          <div class="menu-icon">
            <svg v-if="item.key === 'intro'" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M12 5.69l5 4.5V18h-2v-6H9v6H7v-7.81l5-4.5M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z"/>
            </svg>
            <svg v-else-if="item.key === 'members'" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm4 18v-6h2.5l-2.54-7.63A1.5 1.5 0 0 0 18.54 8H16c-.8 0-1.54.37-2 1l-3.72 5.5L8.5 12.5 6.28 15.5 3.5 12.5 2 15l5 5h13c.8 0 1.54-.37 2-1l.5-.5h-2.5z"/>
            </svg>
            <svg v-else-if="item.key === 'elders'" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
            <svg v-else-if="item.key === 'warnings'" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
            </svg>
            <svg v-else-if="item.key === 'health'" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M10.5 6h3v12h-3V6zm-2 12v-4H5v4H3v-6h5v4zm8 0h-3v-8h3v8zm2-10h-5v2h5v-2z"/>
            </svg>
            <svg v-else-if="item.key === 'outing'" viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M12 2C8.14 2 5 5.14 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.86-3.14-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>
              <path d="M0 0h24v24H0z" fill="none"/>
            </svg>
          </div>
          <span class="menu-text">{{ item.label }}</span>
        </div>
      </nav>
      <div class="sidebar-footer">
        <div class="user-info">
          <div class="user-avatar">
            <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
              <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
            </svg>
          </div>
          <div class="user-details">
            <div class="user-name">{{ userInfo.name }}</div>
            <div class="user-role">社区管理员</div>
          </div>
        </div>
        <button class="logout-btn" @click="handleLogout">
          <svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor">
            <path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/>
          </svg>
          退出登录
        </button>
      </div>
    </div>
    
    <!-- 主内容区 -->
    <div class="main-content">
      <header class="header">
        <div class="breadcrumb">
          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
            <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
          </svg>
          <span>{{ getCurrentMenuLabel() }}</span>
        </div>
        <div class="header-actions">
          <div class="time-display">{{ currentTime }}</div>
          <div class="user-profile">
            <div class="user-avatar">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
                <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
              </svg>
            </div>
            <span>{{ userInfo.name }}</span>
          </div>
        </div>
      </header>
      <div class="content">
        <router-view></router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { getUserInfo } from '../utils/auth'

const router = useRouter()
const route = useRoute()
const userInfo = ref({ name: 'Admin' })
const currentTime = ref('')

const menuItems = [
  { key: 'intro', label: '社区简介' },
  { key: 'members', label: '社区成员' },
  { key: 'elders', label: '社区老人' },
  { key: 'warnings', label: '预警查看' },
  { key: 'health', label: '健康数据查看' },
  { key: 'outing', label: '外出记录' }
]


// 获取当前激活的菜单项
const isMenuItemActive = (key) => {
  // 从路由路径中提取当前页面
  const pathParts = route.path.split('/')
  const currentPage = pathParts[pathParts.length - 1]
  return currentPage === key
}

// 获取当前菜单标签
const getCurrentMenuLabel = () => {
  const pathParts = route.path.split('/')
  const currentPage = pathParts[pathParts.length - 1]
  const item = menuItems.find(item => item.key === currentPage)
  return item ? item.label : '首页'
}

// 导航到指定页面
const navigateTo = (key) => {
  router.push(`/home/${key}`)
}

// 处理退出登录
const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('userInfo')
  localStorage.removeItem('communityId')
  router.push('/login')
}

// 更新时间显示
const updateTime = () => {
  const now = new Date()
  const year = now.getFullYear()
  const month = String(now.getMonth() + 1).padStart(2, '0')
  const day = String(now.getDate()).padStart(2, '0')
  const hours = String(now.getHours()).padStart(2, '0')
  const minutes = String(now.getMinutes()).padStart(2, '0')
  const seconds = String(now.getSeconds()).padStart(2, '0')
  currentTime.value = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}
// 获取社区ID并存储到localStorage
const fetchAndStoreCommunityId = async () => {
  // 先检查localStorage中是否已存在communityId
  const existingCommunityId = localStorage.getItem('communityId')
  if (existingCommunityId) {
    return
  }
  
  try {
    const res = await request.get('/community/current')
    if (res.code === 1 && res.data.communityId) {
      localStorage.setItem('communityId', res.data.communityId)
    }
  } catch (error) {
    console.warn('获取社区ID失败:', error)
  }
}
// 获取用户信息
onMounted(() => {
  const user = getUserInfo()
  if (user) {
    userInfo.value = user
  }
   fetchAndStoreCommunityId()
  // 初始化时间并每秒更新
  updateTime()
  setInterval(updateTime, 1000)
})

onUnmounted(() => {
  // 清除定时器
  clearInterval(updateTime)
})
</script>

<style scoped>
.layout {
  display: flex;
  min-height: 100vh;
  background: #f0f2f5;
  position: relative; /* 防止被绝对定位元素影响 */
}

.sidebar {
  width: 260px;
  background: linear-gradient(180deg, #001529 0%, #002140 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  box-shadow: 2px 0 8px rgba(0, 21, 41, 0.15);
  z-index: 100;
}
.logo {
  padding: 24px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.logo h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.menu {
  padding: 24px 0;
  flex: 1;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 14px 24px;
  cursor: pointer;
  transition: all 0.3s;
  margin: 0 12px;
  border-radius: 8px;
}

.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}

.menu-item.active {
  background: linear-gradient(90deg, #1890ff 0%, #4facfe 100%);
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

.menu-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
}

.menu-text {
  font-size: 16px;
  font-weight: 500;
}

.sidebar-footer {
  padding: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto; /* ✅ 关键：固定到底部 */
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4facfe;
  margin-right: 12px;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}

.user-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.logout-btn {
  width: 100%;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  transition: all 0.3s;
}

.logout-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: calc(100vw - 260px);
}

.header {
  height: 70px;
  background: #fff;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 10;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  color: #333;
}

.breadcrumb svg {
  color: #1890ff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.time-display {
  font-size: 14px;
  color: #666;
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
}

.user-profile .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1890ff;
}

.content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  min-width: 1000px;
  max-height: 1100px;
}

@media (max-width: 768px) {
  .sidebar {
    width: 80px;
  }
  
  .logo h2,
  .menu-text,
  .user-details,
  .logout-btn span {
    display: none;
  }
  
  .logo {
    justify-content: center;
    padding: 24px 0;
  }
  
  .logo-icon {
    margin: 0;
  }
  
  .menu-item {
    justify-content: center;
    padding: 16px;
    margin: 0 8px;
  }
  
  .menu-icon {
    margin: 0;
  }
  
  .sidebar-footer {
    padding: 16px 0;
  }
  
  .user-info {
    justify-content: center;
    margin-bottom: 16px;
  }
  
  .user-avatar {
    margin: 0;
  }
  
  .logout-btn {
    justify-content: center;
    padding: 12px;
  }
  
  .breadcrumb span {
    display: none;
  }
}
</style>